<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<title>智慧巴士-订单第二步</title>
		<style>
			.layui-container {
				margin-top: 10px;
				height: 40px;
				line-height: 40px;
			}

			.title {
				text-align: center;
				background-color: #009F95;
			}

			.null {
				color: #fff;
			}

			.layui-card-header {
				background-color: #E4E4E4;
			}

			#l-map {
				height: 300px;
				width: 100%;
				/*z-index: 0;*/
			}

            .layui-panel{
                margin-top: 5px;
                padding: 10px;
            }

</style>
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row" style="margin-bottom: 10px;">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10">
					<button type="button" id="prev-btn" class="layui-btn layui-btn-sm layui-btn-primary">
						<i class="layui-icon layui-icon-left">返回</i>
					</button>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10 title">
					填写信息
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>

			<div class="layui-row">
				<div class="layui-col-xs1 null">
					<span class="bus-id">1</span>
				</div>
				<div class="layui-col-xs10 bus-map">
					<div class="layui-card">
						<div class="layui-card-header">详细信息</div>
						<div class="layui-card-body">
							<li><div id="l-map"></div></li>
							<li><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div></li>
							<li>起点:<input type="text" class="layui-input" id="startPoint" name="startPoint" /><input type="hidden" id="startLng" name = "startLng" /><input type="hidden" id="startLat" name = "startLat" /></li>
							<li>终点:<input type="text" class="layui-input" id="endPoint" name="endPoint" /><input type="hidden" id="endLng" name = "endLng" /><input type="hidden" id="endLat" name = "endLat" /></li>
							<div class="layui-card-header">
                                <p style="float: left">乘客信息</p>
                                <i id="userAddBtn" style="float: right;color: #009688;font-size: 18pt;" class="layui-icon layui-icon-add-1"></i>
                            </div>
                            <div class="layui-card-body" id="userInfoDiv">

                            </div>
                        </div>


                    </div>
					</div>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
			<div class="layui-row" style="margin-top: 10px;">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10" style="text-align: center;">
					<button type="button" id="next-btn" class="layui-btn" style="width: 60%;">下一步</button>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<!-- <script type="text/javascript" src="js/LuShu_min.js"></script> -->

		<script type="text/javascript">

			var myValue;
			var suggestId;
			var map;

			function loadScript() {
				var script = document.createElement("script");
				script.src =
						"https://api.map.baidu.com/api?v=2.0&type=webgl&ak=do2yPKBE3TG2NWilpYYns6QPaYReUT2C&callback=mapInit&s=1";
				document.body.appendChild(script);
			}

			function mapInit() {
				map = new BMapGL.Map("l-map");
				map.centerAndZoom("天安门", 12); // 初始化地图,设置城市和地图级别。
				map.enableScrollWheelZoom();
				console.log(suggestId);

			}

			function bindSearch(){
				var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
						{
							"input": suggestId,
							"location": map
						});
				ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
					var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if (e.fromitem.index > -1) {
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

					value = "";
					if (e.toitem.index > -1) {
						_value = e.toitem.value;

						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					document.getElementById("searchResultPanel").innerHTML = str;
				});


				ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
					var _value = e.item.value;
					myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
					console.log(_value);
					document.getElementById("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " +
							myValue;
					setPlace(map);
				});
			}

			function setPlace(map) {
				map.clearOverlays();    //清除地图上所有覆盖物
				function myFun() {
					var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					console.log(pp.lng + ":" + pp.lat);
					$("#"+suggestId).next("input").val(pp.lng);
					$("#"+suggestId).next("input").next("input").val(pp.lat);

					map.centerAndZoom(pp, 18);
					map.addOverlay(new BMapGL.Marker(pp)); //添加标注
				}
				var local = new BMapGL.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);
			}



			$(function() {
			    var id = 0;
				loadScript();

				$("#startPoint").one("focusin", function() {
					suggestId =$(this).attr("id");
					bindSearch();
				});

				$("#endPoint").one("focusin", function() {
					suggestId =$(this).attr("id");
					bindSearch();
				});

				$("#userAddBtn").on("click",function (){
				    var panel = $("<div class=\"layui-panel\"></div>");
                    panel.append("<li>乘客姓名:<input type=\"text\" class=\"layui-input\"  name=\"name\"/></li>").append("<li>手机号:<input type=\"text\" class=\"layui-input\"  name=\"phone\"/></li>").append("</div>");
                    $("#userInfoDiv").append(panel);
                });


				$("#prev-btn").on("click", function() {
					window.location.href = "bus-order1.html";
				});

				$("#next-btn").on("click", function() {
					var busOrder = JSON.parse(localStorage.getItem("busOrder"));
                    busOrder.location.startPoint = $("#startPoint").val();
                    busOrder.location.endPoint = $("#endPoint").val();
					busOrder.location.startLat = $("#startLat").val();
					busOrder.location.startLng = $("#startLng").val();
					busOrder.location.endLat = $("#endLat").val();
					busOrder.location.endLng = $("#endLng").val();

					var userInfoArr = new Array();
                    $("#userInfoDiv .layui-panel").each(function(index){
                        var name = $(this).find("input[name='name']").val();
                        var phone = $(this).find("input[name='phone']").val();
                        var userInfo ={};
                        userInfo.name = name;
                        userInfo.phone = phone;
                        userInfoArr.push(userInfo);
                    });
					busOrder.userInfoArr = userInfoArr;
					console.log(busOrder.userInfoArr);
					localStorage.setItem("busOrder",JSON.stringify(busOrder));
					layer.msg("下一步");
					window.location.href = "bus-order-confirm.html";
				});

				layui.use('laydate', function(){
					var laydate = layui.laydate;

					//执行一个laydate实例
					laydate.render({
						elem: '#test1' //指定元素
					});
				});
			})
		</script>
	</body>
</html>
